<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxdemo</title>
    <script type="text/javascript">
        // 创建要给ajax引擎对象
        function doAjax() {
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // * 客户端页面委托ajax引擎代理；
            xmlhttp.open("GET", "ServletAjaxDemo?id=110", true);
            // * ajax引擎代理发送请求到服务器；
            xmlhttp.send(); // 如果是post方式则可以使用send发送数据对象 send(data)
            // * ajax引擎监听服务器和自身的状态变化；
            // 通过 onreadystatechange 事件 监听服务器的状态和ajax引擎自己的状态变化
            // * 监听到成功完成状态，通过回调函数局部更新客户端页面；
            xmlhttp.onreadystatechange = function () {
                // ajax引擎自身的状态变化：xmlhttp.readyState
                // xmlhttp.status 服务器的http请求的状态变化  100 - 600
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // ajax引擎对象的 xmlhttp.responseText 属性存储的是 服务器影响过来的内容
                    // 也就是，printwriter 输出的内容
                    // 进行页面的局部更新   【JavaScript进行dom操作】
                    document.getElementById("showMsg").innerHTML = xmlhttp.responseText;
                }
            };
        }


    </script>
</head>
<body>
<span id="showMsg"></span>
<button onclick="doAjax()">ajaxdemo</button>
</body>
</html>